import { Button } from "antd"
import styled from "styled-components"

export const colorButtons = {
	Green: "#67c23a",
	Yellow: "#e6a23c",
	Red: "#f56c6c",
	Primary: "#13a8a8"
}

const createStyledButton = (color: string) => styled(Button)`
	min-width: 60px;
	color: #fff;
	background-color: ${color};
	border-color: ${color};

	&.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
		border-color: ${color};
		background: ${color};
	}
`

type ButtonStyles = {
	[key: string]: ReturnType<typeof createStyledButton>
}

const buttonStyles: ButtonStyles = {}

Object.entries(colorButtons).forEach(([key, color]) => {
	buttonStyles[`SButton${key}`] = createStyledButton(color)
})

export default buttonStyles
